import { useEffect, useState } from 'react';
import { Row, Col, Divider } from 'antd';
import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons';
import classNames from 'classnames';
import { Chart, Point, Annotation, Axis, Coordinate, DonutChart } from 'bizcharts';
import _ from 'lodash';
import styles from './index.less';

const total = 40;
const attendanceInfoData = {
  result: {
    morningDisease: 1,
    morningPersonal: 5,
    morningActual: 34,
    total: 40,
    afternoonDisease: 2,
    afternoonPersonal: 5,
    afternoonActual: 33,
  },
};
const leaveStatisticInfoData = {
  result: [
    {
      type: '事假',
      interval: '上午',
      count: 3,
    },
    {
      type: '病假',
      interval: '上午',
      symptomName: '头疼',
      count: 2,
    },
    {
      type: '疫情-集中隔离',
      interval: '上午',
      count: 1,
    },
    {
      type: '事假',
      interval: '下午',
      count: 4,
    },
    {
      type: '病假',
      interval: '下午',
      symptomName: '头疼',
      count: 1,
    },
    {
      type: '疫情-集中隔离',
      interval: '下午',
      count: 2,
    },
  ],
};
export default () => {
  const [chartScale, setChartScale] = useState();
  const [morningChartData, setMorningChartData] = useState([]);
  const [afternoonChartData, setAfternoonChartData] = useState([]);
  const [morningChartData2, setMorningChartData2] = useState([]);
  const [afternoonChartData2, setAfternoonChartData2] = useState([]);

  useEffect(() => {
    if (attendanceInfoData) {
      setChartScale({
        value: {
          min: 0,
          max: attendanceInfoData?.result?.total,
          tickInterval: 10,
        },
      });
      setMorningChartData([{ value: attendanceInfoData?.result?.morningActual }]);
      setAfternoonChartData([{ value: attendanceInfoData?.result?.afternoonActual }]);
    }
  }, [attendanceInfoData]);

  useEffect(() => {
    if (leaveStatisticInfoData) {
      setMorningChartData2(leaveStatisticInfoData?.result?.filter((x) => x.interval === '上午'));
      setAfternoonChartData2(leaveStatisticInfoData?.result?.filter((x) => x.interval === '下午'));
    }
  }, [leaveStatisticInfoData]);

  return (
    <div className={classNames(styles.wrapper)} style={{ display: 'flex' }}>
      <div className={classNames('bg', 'bg-1', styles['bg-1'])} />
      <div className="bg bg-2" />
      <Row className={styles['core-wrapper']} style={{ flexFlow: 'column', flex: 1 }}>
        <Col flex="52px">
          <Row className={classNames('linear-title', styles.title)} justify="center">
            <span>学生考勤</span>
          </Row>
        </Col>
        <Col flex="110px">
          <Row style={{ height: '100%' }}>
            <Col span={12}>
              <div className={styles['chart-tooltip']}>
                <div style={{ color: '#1890FF' }}>总人数: {total}</div>
                <div style={{ color: 'red' }}>
                  请假数: {total - attendanceInfoData?.result?.morningActual}
                </div>
              </div>
              <Chart
                height={110}
                data={morningChartData}
                scale={chartScale}
                autoFit
                appendPadding={[-20, 5, 0, 5]}
              >
                <Coordinate
                  type="polar"
                  radius={0.6}
                  startAngle={-1 * Math.PI}
                  endAngle={0 * Math.PI}
                />
                <Axis name="1" />
                <Axis
                  name="value"
                  line={null}
                  label={{
                    offset: 20,
                    style: {
                      fontSize: 12,
                      textAlign: 'center',
                      textBaseline: 'middle',
                    },
                  }}
                  subTickLine={{
                    count: 4,
                    length: 12,
                  }}
                  tickLine={{
                    length: 20,
                  }}
                  grid={null}
                />
                <Point position="value*1" color="transparent" shape="pointer" />
                <Annotation.Arc
                  start={[0, 1]}
                  end={[total, 1]}
                  style={{
                    stroke: '#1890FF',
                    lineWidth: 16,
                    lineDash: null,
                  }}
                />
                <Annotation.Arc
                  start={[morningChartData[0]?.value, 1]}
                  end={[total, 1]}
                  style={{
                    stroke: 'red',
                    lineWidth: 8,
                    lineDash: null,
                  }}
                />
              </Chart>
            </Col>
            <Col span={12}>
              <DonutChart
                height={110}
                data={morningChartData2}
                radius={0.65}
                innerRadius={0.6}
                legend={{ visible: false }}
                angleField="count"
                colorField="type"
                pieStyle={{ stroke: 'white', lineWidth: 2 }}
                label={{
                  style: { fontSize: 10 },
                  content: (v) => `${v.type} ${v.count}`,
                }}
                statistic={{
                  title: {
                    style: {
                      fontSize: 12,
                    },
                    customHtml: () => '总计',
                  },
                  content: {
                    style: {
                      fontSize: 12,
                      marginTop: 5,
                    },
                    formatter: (__, data) => {
                      const sum = _.sumBy(data, 'count');
                      return `${sum}人`;
                    },
                  },
                }}
                autoFit
                appendPadding={0}
              />
            </Col>
          </Row>
        </Col>
        <Col flex="10px">
          <Divider style={{ margin: '-10px 0 0 0' }}>
            <CaretUpOutlined style={{ color: '#1890FF' }} />
            上午
            <CaretDownOutlined style={{ color: '#1890FF', marginLeft: 20 }} />
            下午
          </Divider>
        </Col>
        <Col flex="110px">
          <Row style={{ height: '100%' }}>
            <Col span={12}>
              <div className={styles['chart-tooltip']}>
                <div style={{ color: '#1890FF' }}>总人数: {total}</div>
                <div style={{ color: 'red' }}>
                  请假数: {total - attendanceInfoData?.result?.afternoonActual}
                </div>
              </div>
              <Chart
                height={110}
                data={afternoonChartData}
                scale={chartScale}
                autoFit
                appendPadding={[-20, 5, 0, 5]}
              >
                <Coordinate
                  type="polar"
                  radius={0.6}
                  startAngle={-1 * Math.PI}
                  endAngle={0 * Math.PI}
                />
                <Axis name="1" />
                <Axis
                  name="value"
                  line={null}
                  label={{
                    offset: 20,
                    style: {
                      fontSize: 12,
                      textAlign: 'center',
                      textBaseline: 'middle',
                    },
                  }}
                  subTickLine={{
                    count: 4,
                    length: 12,
                  }}
                  tickLine={{
                    length: 20,
                  }}
                  grid={null}
                />
                <Point position="value*1" color="transparent" shape="pointer" />
                <Annotation.Arc
                  start={[0, 1]}
                  end={[total, 1]}
                  style={{
                    stroke: '#1890FF',
                    lineWidth: 16,
                    lineDash: null,
                  }}
                />
                <Annotation.Arc
                  start={[afternoonChartData[0]?.value, 1]}
                  end={[total, 1]}
                  style={{
                    stroke: 'red',
                    lineWidth: 8,
                    lineDash: null,
                  }}
                />
              </Chart>
            </Col>
            <Col span={12}>
              <DonutChart
                height={110}
                data={afternoonChartData2}
                radius={0.65}
                innerRadius={0.6}
                legend={{ visible: false }}
                angleField="count"
                colorField="type"
                pieStyle={{ stroke: 'white', lineWidth: 2 }}
                label={{
                  style: { fontSize: 10 },
                  content: (v) => `${v.type} ${v.count}`,
                }}
                statistic={{
                  title: {
                    style: {
                      fontSize: 12,
                    },
                    customHtml: () => '总计',
                  },
                  content: {
                    style: {
                      fontSize: 12,
                      marginTop: 5,
                    },
                    formatter: (__, data) => {
                      const sum = _.sumBy(data, 'count');
                      return `${sum}人`;
                    },
                  },
                }}
                autoFit
                appendPadding={0}
              />
            </Col>
          </Row>
        </Col>
      </Row>
    </div>
  );
};
